<template>
  <div>
    <el-form ref="form" :model="form" class="" label-width="80px">
      <el-form-item :label="$t('configLazyLoad.robotSeven.relevantInfo1')">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-select v-model="searchObj.type" style="width:100%" @change="search" v-if="options.length">
              <el-option
                v-for="item in options"
                :label="item.name"
                :value="item.pId === ''? '':item._id">
              </el-option>
            </el-select >
          </el-col>
          <el-col :span="12">
            <div class="search" @keyup.enter="search">
              <el-input
                size="mini"
                :placeholder="$t('configLazyLoad.robotSeven.pleaseInputSearchContent')"
                v-model="searchObj.name"
              >
                <i
                  class="el-input__icon el-icon-search"
                  slot="suffix"
                  @click="search">
                </i>
              </el-input>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="table relevant-question">
        <div class="questionTable">
          <pagination
            :small="true"
            :currentPage="pagination.currentPage"
            :count="pagination.count"
            @turnPage="search"
            :totalPage="Math.ceil(pagination.count/10)"
            >
          </pagination>
        </div>
        <el-table :data="tableData"
                  @row-click="rowClick"
                  size="mini"
                  highlight-current-row
                  stripe>
          <el-table-column
            v-if = "tableData.length>0"
            width="55" >
            <template scope="scope">
              <el-radio size="mini" class="radio"  @click.native.prevent="rowClick(scope.row)" v-model.trim="form.qId" :label="scope.row.qid"></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="question" :label="$t('configLazyLoad.robotSeven.question')">
          </el-table-column>
          <el-table-column prop="type" :label="$t('configLazyLoad.robotSeven.type')">
          </el-table-column>
        </el-table>
      </div>
      <div v-if="!hiddenEditName" class="name">
        <div v-if="currentRefreQuestion.name" class="current-name">&nbsp;&nbsp;{{$t('configLazyLoad.robotSeven.relevantInfo2')}}&nbsp;&nbsp;&nbsp;&nbsp;{{currentRefreQuestion.name}}</div>
        <el-form-item :label="$t('configLazyLoad.robotSeven.relevantInfo4')">
          <el-input v-model="form.name" placeholder=""></el-input>
        </el-form-item>
        <p class="tip">{{$t('configLazyLoad.robotSeven.relevantInfo3')}}</p>
      </div>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="cancelQuestion" class="primary_btn">{{$t('public.cancel')}}</el-button>
      <el-button type="primary" @click="confirmQuestion" class="primary_btn">{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/public-modules/card/Pagination'
import {getCacheByKey, deepClone} from '@/utils/m7Utils'
export default {
  name: 'questionManage',
  data () {
    return {
      pagination: {
        currentPage: 0,
        count: 0
      },
      options: [],
      tableData: [
      ],
      form: {
        name: '',
        qId: ''
      },
      selected: [],
      searchObj: {
        name: '',
        type: '',
        page: 1,
        limit: 10,
        disabledQuestionId: []
      }
    }
  },
  props: {
    disabledQuestionId: {
      type: Array,
      default: function () {
        return []
      }
    },
    currentRefreQuestion: {
      type: Object,
      default: function () {
        return {}
      }
    },
    type: {type: String, default: 'no'},
    hiddenEditName: {type: Boolean, default: false},
    refresh: Number
  },
  computed: {
  },
  components: {
    Pagination
  },
  watch: {
    refresh () {
      if (this.type !== 'no') {
        this.searchObj.type = this.type
      }
      this.search(1)
    }
  },
  methods: {
    rowClick (row) {
      this.form.name = row.question
      this.form.qId = row.qid
    },
    confirmQuestion () {
      if (this.form.qId === '') {
        this.$message({
          message: this.$t('configLazyLoad.robotSeven.pleaseSelectArecord'),
          type: 'error'
        })
        return
      } else if (this.form.name === '') {
        this.$message({
          message: this.$t('configLazyLoad.robotSeven.pleaseFillInTheDisplayName'),
          type: 'error'
        })
        return
      }
      let data = deepClone(this.form)
      data.type = this.searchObj.type
      this.$emit('saveReleventQuestion', data, this.currentRefreQuestion.type)
    },
    search (page) {
      this.form.name = this.currentRefreQuestion.name ? this.currentRefreQuestion.name : ''
      this.form.qId = this.currentRefreQuestion.qId ? this.currentRefreQuestion.qId : ''
      this.searchObj.page = typeof page === 'number' ? page : 1
      this.searchObj.disabledQuestionId = this.disabledQuestionId || []
      this.$store.dispatch('queryQuestions', this.searchObj).then((res) => {
        this.tableData = []
        if (res.success) {
          this.pagination.count = res.count
          this.pagination.currentPage = this.searchObj.page
          let questions = res.list
          for (let i = 0; i < questions.length; i++) {
            let type = ''
            if (!questions[i].type) {
              type = this.$t('sms.quanBu')
            } else {
              type = getCacheByKey('quesTypes', '_id', questions[i].type).name
            }
            this.tableData.push({
              question: questions[i].name,
              type: type,
              qid: questions[i]._id
            })
          }
        }
      })
    },
    cancelQuestion () {
      this.$emit('close')
    }
  },
  beforeMount () {
    this.$store.dispatch('getCache', {type: 'quesTypes'}).then((res) => {
      this.options = res.sort(function (a, b) {
        return a.pId.localeCompare(b.pId)
      })
      if (this.type !== 'no') {
        this.searchObj.type = this.type
      }
      this.search(1)
    })
  }
}
</script>
<style lang="stylus" scoped>
  .type
    margin-right 25px
  .el-dialog--small
    width 100%
  .table
    margin 16px 0
  .questionTable
    border 1px solid #e7e7eb
    height 40px
    border-bottom none
    .page
      float right
      margin-top 7px
  .tip
    text-indent 80px
    color #3b5997
    font-size 12px
  .dialog-footer
    margin-top 25px
    text-align center
  .name
    padding-top 20px
  .current-name
    padding-bottom 8px
</style>
